<template>
	<div class="app-container">
		<el-form :inline="true">
			<el-form-item>
				<el-select v-model="queryParam.checkTypeName" placeholder="请选择品类" size="mini">
					<el-option v-for="item in options" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryParam.checkGroup" placeholder="请选择检验小组" size="mini" clearable>
					<el-option v-for="item in groups" :key="item.inspectionGroupName" :label="item.inspectionGroupName"
						:value="item.inspectionGroupName">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker size="mini" v-model="timeRange" value-format="yyyy-MM-dd" type="daterange"
					range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="品名" v-model="queryParam.productName" :clearable="true" size="mini" />
			</el-form-item>
			<el-form-item>
				<el-input placeholder="批号" v-model="queryParam.batchNum" :clearable="true" size="mini" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" class="pan-btn primary-btn" icon="el-icon-search" size="mini"
					@click="getData()">搜索</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%;" max-height="750" v-loading="loadingStatus">
			<el-table-column type="index" label="序号" width="50">
			</el-table-column>
			<el-table-column prop="checkId" width="80" label="请验编号">
			</el-table-column>
			<el-table-column prop="productGmp" width="200" label="GMP编码">
			</el-table-column>
			<el-table-column prop="productSpec" width="200" label="规格">
				<template slot-scope="{row}">
					<span v-html="row.productSpec"></span>
				</template>
			</el-table-column>
			<el-table-column prop="checkTypeName" width="80" label="品类">
			</el-table-column>
			<el-table-column prop="productName" label="品名">
			</el-table-column>
			<el-table-column prop="batchNum" label="批号">
			</el-table-column>
			<el-table-column prop="registCheckDate" label="请验时间">
			</el-table-column>
			<el-table-column label="检验组">
				<template slot-scope="{row}">
					<span v-for="(group,key) in row.groups" :key="key">
						<el-badge :value="group.length" style="margin-top: 10px;">
							<el-button size="mini" @click="showDrawer(group)">{{key}}</el-button>
						</el-badge>
						&nbsp;
					</span>
				</template>
			</el-table-column>
		</el-table>

		<el-drawer title="检验详情" :visible.sync="drawer" :with-header="false" size="370">
			<el-table :data="itemTableData" style="width: 100%">
				<el-table-column prop="inspectionGroupName" label="检验组" width="100">
				</el-table-column>
				<el-table-column prop="inspectionItemName" label="检验项" width="100">
				</el-table-column>
				<el-table-column label="状态" width="100">
					<template slot-scope="{row}">
						<el-tag v-if="row.itemStatus == 2" type="success" size="mini">完成</el-tag>
						<el-tag v-else type="info" size="mini">未完成</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="itemConclusionmerge" label="结果" width="120">
				</el-table-column>
			</el-table>
		</el-drawer>

	</div>
</template>

<script>
	import {
		getGroupList
	} from "@/api/inspection"
	import {
		getProductCategorys
	} from "@/api/product"

	import {
		query
	} from './api.js'

	export default {
		name: 'checkItemGroup',
		data() {
			return {
				itemTableData: [],
				tableData: [],
				total: 100,
				loadingStatus: false,
				queryParam: {
					startTime: '',
					endTime: '',
					checkGroup: "",
					checkTypeName: "原料",
					productName: "",
					batchNum: ""
				},
				options: ["原料", "辅料", "包材"],
				groups: [],
				timeRange: [this.getLastDate(), this.getNowDate()],
				drawer: false
			}
		},
		mounted() {
			this.initSelect()
			this.searchData()
		},
		methods: {
			showDrawer(groups){
				console.log(groups)
				this.drawer = true;
				this.itemTableData = groups
			},
			getData() {
				this.searchData()
			},
			initSelect() {
				const params = {
					page: 1,
					limit: 30,
					groupName: null
				}
				getGroupList(params).then(res => {
					this.groups = res.page.list
				})
			},
			searchData() {
				this.loadingStatus = true;
				if (this.timeRange != '') {
					this.queryParam.startTime = this.timeRange[0]
					this.queryParam.endTime = this.timeRange[1]
				}
				query(this.queryParam).then(res => {
					this.tableData = res.itemGroupVos
					this.total = res.total
					this.loadingStatus = false;
				})
			},
			/**
			 * 查询当天日期
			 */
			getNowDate() {
				const timeOne = new Date()
				const year = timeOne.getFullYear()
				let month = timeOne.getMonth() + 1
				let day = timeOne.getDate()
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				const NOW_MONTHS_AGO = `${year}-${month}-${day}`
				return NOW_MONTHS_AGO
			},
			/**
			 * 上月
			 */
			getLastDate() {
				const timeOne = new Date()
				const year = timeOne.getFullYear()
				let month = timeOne.getMonth()
				let day = timeOne.getDate()
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				const NOW_MONTHS_AGO = `${year}-${month}-${day}`
				return NOW_MONTHS_AGO
			}
		}
	}
</script>

<style>
</style>
